<template>
  <div class="view">
    <van-nav-bar
      title="我的余额"
      left-arrow
      @click-left="$router.push('/replace')"
    />
    <div class="my_balabce">
      <span>我的余额</span>
      <span>{{ show.balance }}</span>
      <span class="tixian" @click="txian">提现</span>
    </div>
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="action.curYear"
        :options="show.yearList"
        @change="changeCurYear"
      />
      <van-dropdown-item
        v-model="action.curMonth"
        :options="show.monthList"
        @change="changeCurMonth"
      />
    </van-dropdown-menu>
    <div class="max_table">
      <el-table
        style="width: 84%; margin: auto"
        :data="show.dataListAll._list"
        class="data_tab"
        border
        element-loading-background="tgba(0,0,0,0.3)"
        element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column type="index" label="#" width="75"></el-table-column>

        <el-table-column prop="number" label="">
          <template slot-scope="scope">
            {{
              scope.row.wi
                ? "提现"
                : scope.row.type == 1
                ? "订单收益"
                : scope.row.type == 2
                ? "超时扣款"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column prop="number" label="金额">
          <template slot-scope="scope">
            <span
              :class="
                scope.row.wi
                  ? 'red'
                  : scope.row.type == 1
                  ? 'blue'
                  : scope.row.type == 2
                  ? 'red'
                  : ''
              "
            >
              {{
                scope.row.wi
                  ? "-" + scope.row.money
                  : scope.row.type == 1
                  ? "+" + scope.row.money
                  : scope.row.re_de.type == 2
                  ? "-" + scope.row.money
                  : ""
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="orders_order_number"
          label="编号"
        ></el-table-column>
        <el-table-column prop="addTime" label="时间"></el-table-column>
      </el-table>
      <el-pagination
        style="margin: 10px 8%"
        @current-change="handleCurrentChange"
        :current-page="action.curPage"
        :page-size="12"
        layout="total,prev, pager, next, jumper"
        :total="show.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { Dialog, Toast } from "vant";
import { get } from "../../../api/query";

export default {
  data() {
    return {
      action: {
        curMonth: "",
        curYear: "",
        curPage: 1,
      },
      online: {},
      post: {
        year: "",
        month: "",
        p: "",
        limit: "",
      },
      show: {
        monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        yearList: [],
        dataListAll: "",
        balance: "",
        total: 1,
      },
    };
  },
  methods: {
    changeCurYear(value) {
      this.action.curYear = value;
      this.action.curPage = 1;
      this.getWallet(this.action.curPage);
    },
    changeCurMonth(value) {
      this.action.curMonth = value;
      this.action.curPage = 1;
      this.getWallet(this.action.curPage);
    },
    handleCurrentChange(newPage) {
      this.action.curPage = newPage;
      this.getWallet(newPage);
    },
    getWallet(newPage) {
      this.post = {
        p: newPage,
        limit: 12,
        year: this.action.curYear,
        month: this.action.curMonth,
      };
      get("moneyBagList", this.post, (res) => {
        if (res.code === 200) {
          this.show.dataListAll = res.data;
          this.show.balance = res.data.errands_info.financeJson.balance;
          this.show.total = Number(res.data.count);
        }
      });
    },
    txian() {
      if (this.smrz) {
        this.$router.push("/replace/balance");
      } else {
        Dialog.alert({
          title: "提示",
          message: `请先进行实名认证`,
        }).then(() => {
          this.$router.push("/authentication");
        });
      }
    },
  },
  created() {
    //初始化时间
    this.action.curYear = new Date().getFullYear();
    this.action.curMonth = new Date().getMonth() + 1;
    for (let i = 0; i < this.show.monthList.length; i++) {
      this.show.monthList[i] = {
        text: this.show.monthList[i] + "月",
        value: i + 1,
      };
    }
    this.show.yearList.push(
      {
        text: this.action.curYear + "年",
        value: this.action.curYear,
      },
      {
        text: this.action.curYear - 1 + "年",
        value: this.action.curYear - 1,
      }
    );
    //  初始化获取当前年月的数据
    this.post = {
      p: 1,
      limit: 12,
      year: this.action.curYear,
      month: this.action.curMonth,
    };
    get("moneyBagList", this.post, (res) => {
      if (res.code === 200) {
        this.show.dataListAll = res.data;
        this.show.balance = res.data.errands_info.financeJson.balance;
        this.show.total = Number(res.data.count);
      }
    });
  },
  deactivated() {
    this.$destroy(true); //销毁组件
  },
};
</script>
<style lang="less" scoped>
.red {
  color: red;
}
.blue {
  color: #006cff;
}
.my_balabce {
  background: linear-gradient(134deg, #2d7bff 0%, #003d8d 100%);
  width: 80%;
  height: 75px;
  margin: auto;
  border-radius: 7px;
  padding: 0 23.5px;
  margin-top: 10px;
  span {
    line-height: 75px;
  }
  span:nth-child(1) {
    font-size: 14px;
    font-family: PingFang-SC-Regular, PingFang-SC;
    font-weight: 400;
    color: #ffffff;
    margin-right: 10px;
  }
  span:nth-child(2) {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
  }
  span:nth-child(3) {
    float: right;
    line-height: 28px;
    width: 73px;
    height: 28px;
    border: 1px solid #fff;
    margin-top: 23px;
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    border-radius: 14px;
  }
}
</style>
